<script setup lang="ts">
import { FormInfo, ChartResults } from "@/views/resourceAccess/components";
import { chartResults, formInfo } from "../components/interface";
import { reactive } from "vue";
import { http } from "@/utils/http";
import dataMock_com from "./assets/dataMock_com.json";
const formProps: formInfo = reactive({
  title: "模型压缩",
  btnNames: ["开始压缩", "暂停", "结束"],
  btnDisabled: [false, false, false],
  formInfoList: [
    {
      id: 1,
      title: "模型选择",
      inputType: "0",
      options: [
        {
          value: "CNN",
          label: "CNN"
        },
        {
          value: "AlexNet",
          label: "AlexNet"
        },
        {
          value: "VGG16",
          label: "VGG16"
        }
      ]
    },
    {
      id: 2,
      title: "配置文件",
      inputType: "1",
      options: undefined
    },
    {
      id: 3,
      title: "基准训练方法",
      inputType: "0",
      options: [
        {
          value: "Qsparse",
          label: "Qsparse"
        },
        {
          value: "FedAvg",
          label: "FedAvg"
        }
      ]
    },
    {
      id: 4,
      title: "优化训练方法",
      inputType: "0",
      options: [
        {
          value: "FedLamp",
          label: "FedLamp"
        }
      ]
    }
  ]
});
const chartResultsProps: chartResults = reactive({
  header: [],
  result: "优化压缩方法比基准压缩方法降低模型大小40%，并提高模型精度10%",
  chartSelect: [1, 1],
  chartData: [
    {
      title: "模型大小（MB）",
      legend: [],
      yAxisData: ["未压缩", "基准压缩方法", "优化压缩方法"],
      seriesData: [5.5, 4.2, 4.8]
    },
    {
      title: "模型精度",
      legend: [],
      xAxisSetting: {
        min: 0.6,
        max: 1
      },
      yAxisData: ["未压缩", "基准压缩方法", "优化压缩方法"],
      seriesData: [1.025, 0.88, 0.975]
    }
  ]
});
const renderChart = dataStatic => {
  const seriesData0 = [],
    seriesData1 = [];
  const sizeArr = dataStatic["model_size"],
    accArr = dataStatic["model_acc"];
  const calculateSave = (val1: number, val2: number) =>
    (((val1 - val2) * 100) / val1).toFixed(2);

  for (let key of ["origin", "basic", "opt"]) {
    seriesData0.push(Number(sizeArr[key].replace(/MB/g, "")));
    seriesData1.push(Number(accArr[key]));
  }

  const save_size = calculateSave(seriesData0[1], seriesData0[2]);
  const save_acc = calculateSave(seriesData1[2], seriesData1[1]);
  chartResultsProps.chartData[0].seriesData = seriesData0;
  chartResultsProps.chartData[1].seriesData = seriesData1;
  chartResultsProps.result = `优化压缩方法比基准压缩方法降低模型大小${save_size}%，并提高模型精度${save_acc}%`;
};
renderChart(dataMock_com[0]);

let intervalReq = null;
const interval = 5000;

const stopRender = () => {
  clearInterval(intervalReq);
  formProps.btnDisabled = [false, false, false];
  formProps.btnNames[0] = "开始压缩";
};

const btnClick1 = e => {
  formProps.btnDisabled = [true, true, true];
  formProps.btnNames[0] = "压缩中...";
  // 监听过程需要轮询
  intervalReq = setInterval(async () => {
    await http.request("get", "@/../public/dataMock_com.json").then(res => {
      if (res[0]["msg"] == "end") {
        console.log(res[0]);
        renderChart(res[0]);
        stopRender();
      }
    });
  }, interval);
};
const btnClick2 = e => {
  console.log(e);
  
  console.log(e, "btnClick22, Panel Father");
};
const btnClick3 = e => {
  console.log(e, "btnClick33, Panel Father");
};
</script>

<template>
  <el-row :gutter="20">
    <el-col :span="12" style="min-height: 200px">
      <el-col style="min-height: 200px">
        <FormInfo
          :title="formProps.title"
          :btnNames="formProps.btnNames"
          :formInfoList="formProps.formInfoList"
          :btnDisabled="formProps.btnDisabled"
          @btnClick1="btnClick1"
          @btnClick2="btnClick2"
          @btnClick3="btnClick3"
        />
      </el-col>
    </el-col>
    <el-col :span="12" style="min-height: 200px">
      <el-col style="min-height: 200px">
        <ChartResults
          :header="chartResultsProps.header"
          :chartSelect="chartResultsProps.chartSelect"
          :chartData="chartResultsProps.chartData"
          :result="chartResultsProps.result"
        />
      </el-col>
    </el-col>
  </el-row>
</template>
